<template>
  <div>
    <weuiHeader theme="修改资料"></weuiHeader>

   <div class="update-info">
	<div class="person-info">
		<div class="row bottom-line">
			<p class="float-left">头像</p>
			<div class="weixin-header">
				<img :src="header" v-if="header">
      			<img src='../images/default_head.png' v-if="!header">
			</div>
			<!-- <div class="arrow"></div> -->
			 <!-- <input type="file" accept="image/*" capture="camera" name="image" class="camera" id="updateHead"/> -->
		</div>

		<div class="row bottom-line" @click="showNicknameDialog = true">
			<p class="float-left">昵称</p>
			<p class="float-right">{{nickname}}</p>
			<div class="arrow"></div>
		</div>

		<div class="row">
			<p class="float-left">性别</p>
			<div class="float-right">
				<span @click="selectMan()"><i class="sex" :class="{'radio-tick': isMan,'radio-default':!isMan}"></i> &nbsp;男</span>
				<span style="margin-left: 10px;" @click="selectWoman()">
					<i class="sex" :class="{'radio-tick': isWoman,'radio-default':!isWoman}"></i> &nbsp;女
				</span>
			</div>
		</div>
	</div>

	<div class="row" style="margin-top:10px;" @click="showPhoneDialog = true">
		<p class="float-left">手机号</p>
		<p class="float-right">{{ phoneFilter(phone) }}</p>
		<div class="arrow"></div>
	</div>

	<div class="mask"></div>

	<!-- 修改昵称模态框 -->
	<div class="update-nickname-dialog dialog" v-show="showNicknameDialog == true">
		<div class="dialog-content">
			<input type="text" class="dialog-input" placeholder="请输入昵称" maxlength="30" v-model="nicknameInput">
			<p class="input-tip">4-30个字符，支持中英文和数字。</p>
			<div class="opt-block">
				<button type="button" class="opt-btn float-left cancel-btn" style="background-color: #dedede" @click="showNicknameDialog = false">取消</button>
				<button type="button" class="opt-btn float-right" style="background-color: #11bbb4;" @click="updateNickname()">确定</button>
			</div>
		</div>
	</div>

	<!-- 填写手机号模态框 -->
	<div class="update-phone-dialog dialog" v-show="showPhoneDialog == true">
		<div class="dialog-content">
			<input type="text" class="dialog-input" placeholder="请输入手机号" maxlength="11" v-model="phoneInput">
			<div class="opt-block">
				<button type="button" class="opt-btn float-left cancel-btn" style="background-color: #dedede" @click="showPhoneDialog = false">取消</button>
				<button type="button" class="opt-btn float-right" style="background-color: #11bbb4;" @click="updatePhone()">确定</button>
			</div>
		</div>
	</div>

  </div>

</div>
</template>

<script type="text/ecmascript-6">
   import weuiHeader from '../components/weuiHeader';
   import Vue from 'vue'
   import {Toast} from 'mint-ui';
   Vue.component(Toast.name, Toast);

 const SUCCESS = 200;
    export default {
      data() {
          return {
          	showNicknameDialog:false,
          	showPhoneDialog:false,
          	isMan:true,
          	isWoman:false,
      	    nickname:'',
            header:'',
            phone:'',
            sex:0,
            nicknameInput:'',
            phoneInput:''
          }
        },
        activated(){
        	let user = JSON.parse(localStorage.getItem("user"));
        	this.nickname = user.nickname;
            this.header = user.headerUrl;
            this.phone = user.phone;
            this.sex = user.sex;
            if(this.sex == 1){
            	this.isMan = true;
            	this.isWoman = false;
            }

            if(this.sex == 2){
            	this.isMan = false;
            	this.isWoman = true;
            }

        },
        methods: {
        	selectMan(){
        		this.isMan = true;
        		this.isWoman = false;

        		this.sex = 1;
        		this._commitData();
        	},
        	selectWoman(){
        		this.isWoman = true;
        		this.isMan = false;

        		this.sex = 2;
        		this._commitData();
        	},
        	phoneFilter(value) {    // 手机号码中间四位值替换
              if(!value) return "暂无手机号";
              let _subphone = value.substring(3,7);
              return value.replace(_subphone,'****');
          },
          updateNickname(){
          	 if(this.nicknameInput == ""){
          	 	Toast("请输入昵称");
          	 	return;
          	 }

          	 if(this.nicknameInput.length <4){
          	 	Toast("昵称不少于4位字符");
          	 	return;
          	 }
          	 this.nickname = this.nicknameInput;
          	 this.showNicknameDialog = false;
          	 this._commitData();
          },
          updatePhone(){
          	 if(this.phoneInput == ""){
          	 	Toast("请输入手机号");
          	 	return;
          	 }

            if(!/^1\d{10}$/gi.test(this.phoneInput)){
                Toast("手机号不合法");
                return;
            }
  
          	 this.phone = this.phoneInput;
          	 this.showPhoneDialog = false;
          	 this._commitData();
          },
          _commitData(){
          	const _this = this;
          	let paramsJson = {
                nickname :_this.nickname,
                headerUrl : _this.header,
                sex : _this.sex,
                phone: _this.phone
            };

            const token = localStorage.getItem("token"); 
          	this.$http({
				method:'post',
				url:'/fastfood/updateUsersInfo',
				headers: {'Authorization':'Basic '+ token },
				data:paramsJson
			}).then((response) => {
				if(response.data.code==SUCCESS){
					console.log("更新数据成功!");
				}
			});
          }

        },
       components: {
          weuiHeader
       }
      
    };

</script>

<style lang="less" scoped>

.update-info {
	padding-top: 55px;

	.person-info {
		background: white;
	}

	.row {
		height: 47px;
		line-height: 47px;
		padding-left: 10px;
		padding-right: 30px;
		background: white;
		position: relative;
		vertical-align: middle;
	}

	.weixin-header {
		line-height: 44px;
		float: right;
	}

	.weixin-header img{
		height: 40px;
		width: 40px;
		border-radius: 50%;
		vertical-align: middle;
		display: inline-block;
	}

	.arrow {
	  content: '';
	  position: absolute;
	  width: 8px;
	  height: 8px;
	  border: 1px solid #3c3c3c;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  -ms-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	  border-top: none;
	  border-right: none;
	  top: 21px;
	  right: 10px;
	}

	.sex {
		display: inline-block;
		width: 16px;
		height: 16px;
		vertical-align: text-bottom;
	}

	.radio-tick {
		background: url("../images/checkbox-tick.png") no-repeat;
		background-size: 100% 100%;
	}

	.radio-default {
		background: url("../images/checkbox-default.png") no-repeat;
		background-size: 100% 100%;
	}

	.bottom-line {
	    border-bottom: 1px solid #dedede;
	 }

	 .camera {
 	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 10;
	    opacity: 0;
	    width: 100%;
	    height: 100%;
	 }

	 .update-nickname-dialog {
    	width: 260px;
	    height: 150px;
	    background: white;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    margin-left: -130px;
	    margin-top: -75px;
	    border-radius: 2px;
	    z-index: 10;
	 }

	.dialog .dialog-content {
	  padding: 15px;
	}
	.dialog .dialog-input {
	  border: 1px solid #dedede;
	  width: 100%;
	  height: 34px;
	  padding-left: 12px;
	  outline: none;
	}

	.dialog .input-tip {
	  font-size: 12px;
	  color: #999;
	  margin-top: 10px;
	}

	.opt-block{
		margin-top:20px;
	}

	.dialog .opt-btn {
	  width: 100px;
	  height: 34px;
	  font-size: 14px;
	  border: none;
	  border-radius: 2px;
	  color: white;
	  outline: none;
	}
	 .update-phone-dialog {
		width: 260px;
	    height: 130px;
	    background: white;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    margin-left: -130px;
	    margin-top: -65px;
	    border-radius: 2px;
	    z-index: 10;
	 }

}
	
</style>
